﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Easyui扩展库 Form - 落阳 整理</title>
    <link href="http://www.easyui-extlib.com/Content/Site.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery/jquery-1.11.0.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-extensions/jquery.jdirk.js"></script>
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/panel/jeasyui.extensions.panel.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/linkbutton/jeasyui.extensions.linkbutton.setPlain.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/panel/jeasyui.extensions.panel.iframe.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/window/jeasyui.extensions.window.autoCenter.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/dialog/jeasyui.extensions.dialog.sealed.js"></script>
</head>
<body>
    <script>
        $(function () {

            var checkTopDialogSealedJs = function () {
                var topHead = top.$("head"),
                    existHeadContent = topHead.html(),
                    exist = $.string.contains(existHeadContent, "jeasyui.extensions.dialog.sealed.js");

                return exist;
            };

            var loadExt = function () {
                var jsUrl = ["http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/linkbutton/jeasyui.extensions.linkbutton.setPlain.js",
                        "http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/panel/jeasyui.extensions.panel.iframe.js",
                        "http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/window/jeasyui.extensions.window.autoCenter.js",
                        "http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/dialog/jeasyui.extensions.dialog.sealed.js"];
                top.$.util.loadJs(jsUrl);

                var cssUrl = ["http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/panel/jeasyui.extensions.panel.css"];
                top.$.util.loadCss(cssUrl);
            };

            $("[name='topMost']").click(function () {
                if ($.string.toBoolean($(this).val()) && !checkTopDialogSealedJs()) {
                    loadExt();
                }
            });

            var theAutoCreateDialog;

            $("#btnOpen0").click(function () {
                var t = $("#d1"),
                    state = $.data(t[0], "dialog");
                if (state) {
                    t.dialog("open");
                }
                else {
                    var href = "EasyuiPanelPage.html";
                    var opts = {
                        href: href,
                        title: "常规方式打开的dialog",
                        width: 400,
                        height: 240,
                        closed: true,
                        buttons:
                            [
                                { text: "确定", iconCls: "icon-ok", handler: function () { alert("确定"); } },
                                { text: "取消", iconCls: "icon-cancel", handler: function () { t.dialog("close"); } }
                            ]
                    };

                    t.dialog(opts).dialog("open");
                }
            });

            $("#btnOpen1").click(function () {

                var href = "EasyuiPanelPage.html";
                $.easyui.showDialog({

                    href: href,
                    buttonsPlain: false,
                    width: 400,
                    height: 240,
                    onLoad: function () {
                        //console.log("HTML中：封装 dialog 加载 [" + href + "] 完毕");
                    }
                });
            });

            $("#btnOpen2").click(function () {
                var href = "EasyuiIndex.html";
                $.easyui.showDialog({

                    href: href,
                    buttonsPlain: false,
                    width: 400,
                    height: 240,
                    iniframe: true,
                    onLoad: function () {
                        //console.log("HTML中：封装 dialog 加载 [" + href + "] 完毕");
                    }
                });
            });

            $("#btnOpen555").click(function () {

                var iniframe = $.string.toBoolean($("[name='iniframe']:checked").val());
                var topMost = $.string.toBoolean($("[name='topMost']:checked").val());
                var autoDestroy = $.string.toBoolean($("[name='autoDestroy']:checked").val());
                if (autoDestroy && theAutoCreateDialog) {
                    theAutoCreateDialog.dialog("destroy"); theAutoCreateDialog = undefined;
                }
                var href = iniframe ? "EasyuiIndex.html" : "EasyuiPanelPage.html";
                if (!autoDestroy && theAutoCreateDialog && theAutoCreateDialog.dialog("options").href != href) {
                    theAutoCreateDialog.dialog("destroy"); theAutoCreateDialog = undefined;
                }

                if (theAutoCreateDialog) {
                    theAutoCreateDialog.dialog("open");
                    return;
                }

                var opts = {
                    href: href,
                    width: 500,
                    height: 340,
                    onClose: function () {
                        if (autoDestroy) {
                            theAutoCreateDialog = undefined;
                        }
                    }
                };
                var returnOnSave = $.string.toBoolean($("[name='onSave']:checked").val());
                var returnOnApply = $.string.toBoolean($("[name='onApply']:checked").val());

                opts.enableSaveButton = $.string.toBoolean($("[name='enableSaveButton']:checked").val());
                opts.saveButtonIndex = $.string.toInteger($("#saveButtonIndex").val());
                opts.saveButtonText = $("#saveButtonText").val();
                opts.saveButtonIconCls = $("#saveButtonIconCls").val();
                opts.onSave = function (dia) {
                    return returnOnSave;
                };
                opts.onApply = function () {
                    return returnOnApply;
                };

                opts.enableApplyButton = $.string.toBoolean($("[name='enableApplyButton']:checked").val());
                opts.applyButtonIndex = $.string.toInteger($("#applyButtonIndex").val());
                opts.applyButtonText = $("#applyButtonText").val();
                opts.applyButtonIconCls = $("#applyButtonIconCls").val();

                opts.enableCloseButton = $.string.toBoolean($("[name='enableCloseButton']:checked").val());
                opts.closeButtonIndex = $.string.toInteger($("#closeButtonIndex").val());
                opts.closeButtonText = $("#closeButtonText").val();
                opts.closeButtonIconCls = $("#closeButtonIconCls").val();

                opts.buttonsPlain = $.string.toBoolean($("[name='buttonsPlain']:checked").val());
                opts.autoDestroy = autoDestroy;
                opts.topMost = topMost;
                opts.iniframe = iniframe;

                var otherButtonsCount = $.string.toInteger($("#otherButtonNumber").numberbox("getValue"));
                var otherButtons = [];
                for (var c = 0; c < otherButtonsCount; c++) {
                    otherButtons.push({ text: "按钮" + (c + 1), index: c, iconCls: "icon-edit", handler: function (dialog, btn) { alert("这是第" + (btn.index + 1) + "个额外按钮。"); } });
                }
                opts.buttons = otherButtons;

                theAutoCreateDialog = $.easyui.showDialog(opts);
            });
        });
    </script>
    <div class="easyui-panel" data-options="fit:true,border:false" style="padding:25px;">
        <div id="d1"></div>
        <a id="btnOpen0" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">把页面上预留的 div#d1 初始化为dialog，href 指向一个部分页。</a>&nbsp;&nbsp;<span style="color:red;">（easyui-dialog原来的使用方式，需要预留div给dialog）</span>
        <br /><br />
        <a id="btnOpen1" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">动态创建div并初始化为dialog，href 指向一个部分页。</a>&nbsp;&nbsp;<span style="color:red;">（不需要预留div给dialog，动态创建div）</span>
        <br /><br />
        <a id="btnOpen2" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">动态创建div并初始化为dialog，内部嵌套 iframe，href 指向一个完整页。</a>&nbsp;&nbsp;<span style="color:red;">（不需要预留div给dialog，动态创建div，并且动态创建iframe，不必管content属性）</span>
        <hr /><br />
        <div style="width:800px;height:380px;border:1px solid #ccc;padding:5px;">
            <span style="color:black;font-size:15px;font-weight:bolder;">保存按钮参数：</span>
            <br />
            <input name="enableSaveButton" type="radio" value="true" checked="checked" /> 启用保存按钮 &nbsp;
            <input name="enableSaveButton" type="radio" value="false" /> 不启用保存按钮 &nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            按钮顺序号&nbsp;<input id="saveButtonIndex" name="saveButtonIndex" type="text" value="101" style="width:60px;" />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            按钮文本&nbsp;<input id="saveButtonText" name="saveButtonText" type="text" value="确定" style="width:60px;" />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            按钮图标样式&nbsp;<input id="saveButtonIconCls" name="saveButtonIconCls" type="text" value="icon-save" style="width:80px;" />
            <br />
            按钮事件&nbsp;
            <input name="onSave" type="radio" value="true" checked="checked" /> 返回 true（关闭dialog） &nbsp;
            <input name="onSave" type="radio" value="false" /> 返回 false（不关闭dialog） &nbsp;
            <br /><br />

            <span style="color:black;font-size:15px;font-weight:bolder;">应用按钮参数：</span>
            <br />
            <input name="enableApplyButton" type="radio" value="true" /> 启用应用按钮 &nbsp;
            <input name="enableApplyButton" type="radio" value="false" checked="checked" /> 不启用应用按钮 &nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            按钮顺序号&nbsp;<input id="applyButtonIndex" name="applyButtonIndex" type="text" value="103" style="width:60px;" />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            按钮文本&nbsp;<input id="applyButtonText" name="applyButtonText" type="text" value="应用" style="width:60px;" />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            按钮图标样式&nbsp;<input id="applyButtonIconCls" name="applyButtonIconCls" type="text" value="icon-ok" style="width:80px;" />
            <br />
            按钮事件&nbsp;
            <input name="onApply" type="radio" value="true" checked="checked" /> 返回 true（禁用按钮） &nbsp;
            <input name="onApply" type="radio" value="false" /> 返回 false（不禁用按钮） &nbsp;
            <br /><br />

            <span style="color:black;font-size:15px;font-weight:bolder;">取消按钮参数：</span>
            <br />
            <input name="enableCloseButton" type="radio" value="true" checked="checked" /> 启用关闭按钮 &nbsp;
            <input name="enableCloseButton" type="radio" value="false" /> 不启用关闭按钮 &nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            按钮顺序号&nbsp;<input id="closeButtonIndex" name="closeButtonIndex" type="text" value="102" style="width:60px;" />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            按钮文本&nbsp;<input id="closeButtonText" name="closeButtonText" type="text" value="取消" style="width:60px;" />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            按钮图标样式&nbsp;<input id="closeButtonIconCls" name="closeButtonIconCls" type="text" value="icon-cancel" style="width:80px;" />
            <br /><br />

            <span style="color:black;font-size:15px;font-weight:bolder;">增加额外按钮：</span>
            额外按钮个数&nbsp;<input id="otherButtonNumber" type="text" class="easyui-numberbox" data-options="min:0,max:3,value:0" style="width:60px;" />
            <br /><br />

            <span style="color:black;font-size:15px;font-weight:bolder;">底部按钮的效果：</span>
            <input name="buttonsPlain" type="radio" value="true" /> Plain 为 true，简洁效果 &nbsp;
            <input name="buttonsPlain" type="radio" value="false" checked="checked" /> Plain 为 false，非简洁效果 &nbsp;
            <br /><br />

            <span style="color:black;font-size:15px;font-weight:bolder;">关闭时自动销毁：</span>
            <input name="autoDestroy" type="radio" value="true" checked="checked" /> 自动销毁 &nbsp;
            <input name="autoDestroy" type="radio" value="false" /> 不销毁 &nbsp;
            <br /><br />

            <span style="color:black;font-size:15px;font-weight:bolder;">是否在顶层window对象中打开：</span>
            <input name="topMost" type="radio" value="true" /> 在顶层window对象中打开 &nbsp;
            <input name="topMost" type="radio" value="false" checked="checked" /> 在当前window对象中打开 &nbsp;
            <br /><br />

            <span style="color:black;font-size:15px;font-weight:bolder;">是否嵌套iframe：</span>
            <input name="iniframe" type="radio" value="true" /> 嵌套iframe，加载完整页面 &nbsp;
            <input name="iniframe" type="radio" value="false" checked="checked" /> 不嵌套iframe，加载部分页面 &nbsp;
            <br /><br />
        </div>
        <br /><br />
        <a id="btnOpen555" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">点击我，根据边框内的配置参数，动态创建div并初始化为dialog。</a>
    </div>
</body>
</html>
